import ClassicEditor from "@ckeditor/ckeditor5-build-classic"
import {useEffect, useState} from "react";
import {Form, Input, Button, Checkbox, Tag, Modal, message} from 'antd';
import {Prompt} from 'react-router';
import "./index.css"

let baocun = false
let shuju = {}

function addemail(props) {
    // 编辑器实例
    let editdiv = {}
    // 是否已经保存到草稿
    const [filelist, setFilelist] = useState([])
    const init = () => {
        ClassicEditor.create(document.querySelector("#edit")).then(edit => {
            editdiv = edit
            console.log("编辑器初始化完成")
        }).catch(err => {
            console.log("初始化失败", err)
        })
    }
    const handleOk = () => {
        console.log("点击确定，保存草稿")
    }
    const leavefunc = () => {
        if(JSON.parse(shuju)==="{}"){return}
        const aa = confirm("是否将邮件保存为草稿")
        if (aa) {
            console.log("将内容保存为草稿", filelist, editdiv.getData())
        }
    }
    useEffect(() => {
        init()
        console.log(props, "都传递了什么")
        // 返回值就是销毁前的调用
        return () => {
            leavefunc()
        }
    }, [])
    // 删除附件
    const shanchufujian = (item) => {
        console.log("被点击的文件是", item)
    }
    // 点击重置
    const chongzhi = () => {
        console.log("点击重置按钮")
    }
    // 点击保存到草稿
    const baocuncaogao = () => {
        baocun = true
        shuju = {}
        props.history.push({pathname: "/view" + "/" + "草稿箱"})
    }
    // 点击发送
    return (
        <div className="w-full h-full flex flex-col justify-between items-start overflow-x-hidden overflow-y-auto">
            <div className="w-full flex-initial divide-y divide-black">
                <div className="w-full h-10 flex justify-start items-center">
                    <Button className="mx-3" type="primary" htmlType="submit" onClick={() => fasong()}>
                        发送
                    </Button>
                    <Button className="mx-5" type="primary" htmlType="submit" onClick={() => chongzhi()}>
                        重置
                    </Button>
                    <Button className="mx-5" type="primary" htmlType="submit" onClick={() => baocuncaogao()}>
                        保存到草稿
                    </Button>
                </div>
                <div className="w-full h-8 flex juzhong bg-green-300">
                    <Input addonBefore="邮箱地址" value={shuju.url1 || ""} onChange={e => shuju["url1"] = e.target.value}
                           className="w-full h-8" placeholder="请输入邮箱地址"/>
                </div>
                <div className="w-full h-8 flex juzhong bg-green-300">
                    <Input addonBefore="抄送地址" value={shuju.url2 || ""} onChange={e => shuju["url2"] = e.target.value}
                           className="w-full h-8" placeholder="请输入抄送邮箱地址，用逗号分隔"/>
                </div>
                <div className="w-full h-8 flex juzhong bg-green-300">
                    <div className="juzhong h-10 flex-initial px-3">
                        <span>附件:</span>
                    </div>
                    <div className="flex-1 flex justify-start items-center">
                        {filelist.map((item, index) => {
                            return (
                                <Tag closable onClose={() => {
                                    shanchufujian(index)
                                }}>
                                    {item.name}
                                </Tag>
                            )
                        })}
                    </div>
                    <Button onClick={() => {
                        message.error("你还真点啊，没有后端服务器，我给你存什么地方啊")
                    }}>上传附件</Button>
                </div>
            </div>
            <div className="w-full flex-1 overflow-x-hidden overflow-y-auto">
                <div id="edit">富文本编辑区</div>
            </div>
        </div>
    )
}

export default addemail